<template>
   <t-drawer
    class="t-dr"
    :visible="visibleDesign"
    :closable="false"
    :fullscreen="fullscreen"
    destroyOnClose
    @close="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading" :delay="delayTime">
      <div class="flex design-header">
        <div class="logo">
          <img :src="systemLogo" alt="logo">
          <div class="title">接口设计</div>
        </div>
        <div class="left-step" :style="leftStep">
          <a-steps :current="currentIndex" size="default">
            <a-step :title="item.name" v-for="(item, index) in stepList" :key="index"/>
          </a-steps>
        </div>
        <div class="right-btn">
          <a-button :class="[currentIndex == 0 ? 'buttonGray' : 'margin-right-xs']" icon="left"
                    @click="changeCurrentIndex('previousStep')" :disabled="currentIndex == 0">{{$ct("PreviousStep","上一步")}}
          </a-button>
          <a-button :class="[
  currentIndex == stepList.length - 1
  ? 'buttonGray'
  : 'margin-right-xs',
  ]" icon="right" @click="changeCurrentIndex('nextStep')" :disabled="currentIndex == stepList.length - 1">
            {{$ct("NextStep","下一步")}}
          </a-button>
          <a-button :class="[
  currentIndex != stepList.length - 1
  ? 'buttonGray'
  : 'cu-btn-primary',
  ]" :disabled="currentIndex != stepList.length - 1" icon="check" @click="handleSubmitData"
                    :loading="loading">{{$ct("save","保存")}}
          </a-button>
          <a-button type="primary" icon="close" @click="handleClose">{{$ct("close","关闭")}}</a-button>
        </div>
      </div>
      <basicSet ref="basicSet" :isEdit="isEdit" v-show="currentIndex === 0"></basicSet>
      <apiSetting ref="apiSetting" :isEdit="isEdit" v-show="currentIndex === 1"></apiSetting>
      <dataFilter ref="dataFilter" :isEdit="isEdit" v-show="currentIndex === 2"></dataFilter>
    </a-spin>
  </t-drawer>
</template>

<script>
  import {mapGetters} from 'vuex'
  import basicSet from "./basicSet";
  import apiSetting from "./apiSetting";
  import dataFilter from "./dataFilter";

  export default {
    components: {
      basicSet,
      dataFilter,
      apiSetting
    },
    props: {
      visibleDesign: {
        type: Boolean,
      },
      basicsUuid: {
        type: String,
        default: () => "",
      },
      formType: {
        type: String,
        default: () => ""
      },
      isEdit: {
        type: Boolean,
        default: () => false
      }
    },
    data() {
      return {
        model:{},
        fullscreen: true,
        currentIndex: 0,
        stepList: [
          {
          name: "基础配置",
          key: 1,
        },
          {
            name: "接口配置",
            key: 2,
          },
          {
            name: "过滤器",
            key: 3,
          },
        ],
        basicSetting: {
          basicLayout: "default",
        },
        activeKey: "1", //列表属性
        loading: false,
        delayTime: 500,
        leftStep: {
          width: 'calc(70% - 160px)',
          padding: '0 10%'
        },
        url:{
          edit:'/system/sysInterfaceManagement/update',  //编辑地址
          add:'/system/sysInterfaceManagement/save'  //新增地址
        }
      };
    },
    mounted(){
      //监听model变化 给表单赋值
      this.$watch("model", () => {
        this.$nextTick(()=>{
          this.$refs.basicSet.model = this.model;
          this.$refs.apiSetting.model = this.model;
          this.$refs.dataFilter.model = this.model;
        })
      });
    },
    watch:{
      visibleDesign:{
        handler(){
          //新增初始化页面数据
          if(!this.isEdit){
            this.$nextTick(() => {
              this.$refs.apiSetting.innitData()
              this.$refs.dataFilter.innitData()
            })
          }
        },
        // immediate:true
      }
    },
    computed: {
      ...mapGetters(['configData']),
      systemLogo() {
        let index = this.configData.findIndex(item => item.code === 'systemLogo')
        if (index >= 0) {
          return this.configData[index].value
        } else {
          return 'https://zysd-shanghai.oss-cn-shanghai.aliyuncs.com/emis/logo.png'
        }
      }
    },
    methods: {
      //保存
      handleSubmitData() {
        //获取基础设置数据
        let basicFormVal = this.$refs.basicSet.getBasicData();
        //获取数据值
        let apiSettingData = this.$refs.apiSetting.getData()
        //容器过滤
        let dataFilter = this.$refs.dataFilter.getData()
        if(!dataFilter){
          this.$message.error('数据值不能为空', 1.5)
          this.loading = false;
          return
        }
        //组装参数
        let param = {
          ...basicFormVal,
          ...apiSettingData,
          dataFilter: JSON.stringify(dataFilter)
        }
        //判断是否新增
        let url = this.isEdit ? this.url.edit : this.url.add
        this.loading = true;
        //发起请求
        this.$post(url, param).then((res) => {
        	if (res.statusCode !== 300) {
        		this.$message.success(res.message ? res.message : '操作成功！', 1.5);
            this.loading = false;
            this.$emit('ok','apiData');
        	} else {
        		this.$message.error(res.message ? res.message : '操作失败', 1.5)
        	}
        	this.loading = false;
        });
      },
      // 步骤切换验证
      changeCurrentIndex(type) {
        if (type == "nextStep" && this.currentIndex == 0) {
          let key = this.$refs.basicSet.validateData();
          if (key == null) return this.$message.info("请确认数据是否正确！", 1.5);
          this.currentIndex++;
        //  如果是新增清空第二步表单

        }else if(type == "nextStep" && this.currentIndex == 1){
          let formValue = this.$refs.apiSetting.validateData();
          // let tab1 = this.$refs.apiSetting.rhTableFormValidateData()
          // let tab2 = this.$refs.apiSetting.rpTableFormValidateData()
          if (!(formValue)) return this.$message.info("请确认数据是否正确！", 1.5);
          this.currentIndex++;
        }else if(type == "previousStep"){
          this.currentIndex--;
        }
      },
      handleClose() {
        let that = this
        that.$confirm({
          title: '警告',
          content: '关闭后所有未保存的数据将会清空，请谨慎操作！',
          okText: '关闭',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            that.$emit('cancel','apiData');
            that.activeKey = '1';
          }
        })
      }
    },
  };
</script>

<style lang="less" scoped>
  @basehight: 56px;

  .buttonGray, .buttonGray:hover {
    color: #d9d9d9;
    margin-right: 10px;
    background: #fafafa;
  }

  .t-dr {
    .design-header {
      width: 100%;
      height: @basehight;
      line-height: @basehight;
      border-bottom: 1px solid #e8e8e8;
      background-color: #fff;

      .left-step {
        // width: 70%;
        // padding: 0 20%;

        .ant-steps {
          padding-top: 10px;
        }
      }
    }
  }

  /deep/ .ant-drawer-header,
  /deep/ .ant-drawer-body {
    padding: 0 !important;
  }

  .right-btn {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
  }

  /deep/ .bpmn-viewer-container {
    height: calc(100vh - 88px);
  }

  .cancelBtn {
    background: #E4746F !important;
    border-color: #E4746F !important;
    color: #fff;
  }

  .cancelBtn:hover {
    opacity: 0.9;
  }

  /deep/ .ant-drawer-content {
    background-color: #F0F2F5;
  }

  .logo {
    width: 160px;
    padding-left: 45px;
    display: flex;
    align-items: center;
    img {
      width: 32px;
      height: 32px;
    }
    .title {
      font-weight: 500;
      display: inline;
      font-size: 16px;
      padding-left: 10px;
    }
  }
</style>
